<template>
  <!-- 影院详情 -->
  <div class="yyxq" data-yyxq="yyxq">
    <div class="cinema" v-if="yingyuan != null && yingyuan.nm">
      <div class="header">
        <div class="header_left" @click="tuichu">
          <i class="iconfont icon-jiantou1"></i>
        </div>
        <div class="header_title line_ellipsis">
          {{ yingyuan.nm }}
        </div>
        <div class="header_right"></div>
      </div>
      <div class="location_block">
        <div class="lb_title line_ellipsis">{{ yingyuan.nm }}</div>
        <div class="lb_local line_ellipsis">
          {{ yingyuan.addr }}
        </div>
        <div class="dwimg">
          <i class="iconfont icon-position"></i>
        </div>
      </div>
      <div class="cinxq" v-if="showslist.length > 0">
        <!-- 轮播 -->
        <div
          class="imglunbo"
          @touchmove="touchmove"
          @touchend="touchend()"
          @touchstart="touchstart"
        >
          <div
            class="bg"
            :style="{ backgroundImage: `url(${showslist[imgindex].img})` }"
          ></div>
          <div class="zezao"></div>
          <ul
            class="imgul"
            :style="{
              transitionDuration: `${trantime}ms`,
              transform: `translateX(${moveX}px)`,
            }"
          >
            <li
              class="imgli"
              :class="{ active: index == imgindex }"
              v-for="(item, index) in showslist"
              :key="item.id"
              @click.stop="imgindex = index"
              ref="imgli"
            >
              <div
                class="img"
                :style="{ backgroundImage: `url(${item.img})` }"
              ></div>
            </li>
          </ul>
        </div>

        <router-link
          v-if="showitem"
          :to="`/FilmDetails/${showitem.id}`"
          class="jianjie"
        >
          <div class="cinname line_ellipsis">
            {{ showitem.nm
            }}<span class="pingfen"
              >{{ showitem.sc != "0.0" ? showitem.sc : showitem.wish
              }}<span class="fen">{{
                showitem.sc != "0.0" ? "分" : "人想看"
              }}</span></span
            ><span v-if="false" class="pingfen">暂无评分</span>
          </div>
          <div class="cintime line_ellipsis">
            {{ showitem.desc }}
          </div>
        </router-link>

        <div class="show_wrap">
          <div class="date_nav view_scroll_x_container">
            <div
              class="dn_item"
              :class="{ dni_select: dayselect == index }"
              v-for="(item, index) in showitem.shows"
              :key="item.showDate"
              @click="dayselect = index"
            >
              {{ Dayfliter(index, showitem.shows)
              }}{{ Datefliter(item.showDate, "M月d日") }}
            </div>
          </div>
          <div class="vip_tips" v-if="vipInfo.length > 0">
            <div class="vt_zekou">折扣</div>
            <div class="vt_text line_ellipsis">{{ vipInfo[0].title }}</div>
            <div class="vt_kaika iconfont">{{ vipInfo[0].process }}</div>
          </div>
          <div
            class="sw_content"
            v-if="showitem && showitem.shows[dayselect].plist.length > 0"
          >
            <div
              class="swc_item"
              v-for="item in showitem.shows[dayselect].plist"
              :key="item.seqNo"
            >
              <div class="swci_box">
                <div class="swcib_time">
                  <div class="swcibt_top">{{ item.tm }}</div>
                  <div class="swcibt_bottom">
                    {{ sanchang(showitem.dur, item.tm) }}散场
                  </div>
                </div>
                <div class="swcib_type">
                  <div class="swcibt_name">{{ item.lang }} {{ item.tp }}</div>
                  <div class="swcibt_ting">{{ item.th }}</div>
                </div>
                <div class="swcib_price">
                  <div class="swcibp_num">
                    <span class="qianfuhao">￥</span>{{ item.baseSellPrice }}
                  </div>
                  <div class="sp_vipPrice" v-if="item.vipPrice">
                    <div class="spv_zelouka">{{ item.vipPriceName }}</div>
                    <div class="spv_num">￥{{ item.vipPrice }}</div>
                  </div>
                  <div class="sp_extraDesc">{{ item.extraDesc }}</div>
                </div>
                <router-link
                  :to="{
                    path: `/seat/${cinemaId}`,
                    query: {
                      cinemaid: cinemaId,
                      showitem: showitem,
                      movieid: showitem.id,
                    },
                  }"
                  class="swcib_btn"
                  >购票</router-link
                >
              </div>
            </div>
          </div>
          <div class="nosw_content" v-else-if="showitem">
            <van-empty
              class="custom-image"
              :image="`${require('../assets/over.png')}`"
              :description="
                showitem.shows[dayselect].hasShow == 1
                  ? '影片未上映'
                  : '今日场次已经播放完'
              "
            >
              <div class="noswc_btn" @click="dayselect += 1">
                {{
                  showitem.shows[dayselect + 1]
                    ? "点击查看" +
                      Datefliter(
                        showitem.shows[dayselect + 1].showDate,
                        "M月d日"
                      ) +
                      "场次"
                    : "今日无电影可看"
                }}
              </div>
            </van-empty>
          </div>
        </div>
      </div>
      <van-loading
        v-else-if="!nocinema"
        size="24px"
        style="text-align: center; margin-top: 5px"
        color="#4ebb5f"
        >正在加载...</van-loading
      >
      <div v-else class="no_sell_cinema">
        <div class="nosc_text line_ellipsis">暂无该影院的影片信息</div>
      </div>
      <div class="taocan" v-if="!nocinema && taocan.length > 0">
        <div class="taocan_title">影院超值套餐</div>
        <div class="taocan_box">
          <div class="tb_item">
            <div class="tbic_left">
              <div class="tbicl_hot" v-if="taocan[1].cardTag">
                {{ taocan[1].cardTag }}
              </div>
              <van-image
                class="img"
                width="100%"
                height="100%"
                fit="cover"
                :src="`${taocan[1].imageUrl.replace(
                  /(?:2500x2500|2500w_2500h)/g,
                  function (res) {
                    if (res == '2500x2500') {
                      return '250x250';
                    } else if (res == '2500w_2500h') {
                      return '250w_250h';
                    }
                  }
                )}`"
                alt=""
              />
            </div>
            <div class="tbic_right">
              <div class="tbicr_top">
                <div class="tbicrt_title">
                  <span class="tbicrtt_type">{{ taocan[1].titleTag }}</span
                  >{{ taocan[1].title }}
                </div>
              </div>
              <div class="tbicr_bottom">
                <div class="tbicrb_yisou">{{ taocan[1].curNumberDesc }}</div>
                <div class="tbicrb_price">
                  <span class="tbicrbp_fh">￥</span>{{ taocan[1].price }}
                </div>
                <div class="tbicrb_btn">去购买</div>
              </div>
            </div>
          </div>
          <div class="tb_item">
            <div class="tbic_left">
              <div class="tbicl_hot" v-if="taocan[0].cardTag">
                {{ taocan[0].cardTag }}
              </div>
              <van-image
                class="img"
                width="100%"
                height="100%"
                fit="cover"
                :src="`${taocan[0].icon.replace(
                  /(?:2500x2500|2500w_2500h)/g,
                  function (res) {
                    if (res == '2500x2500') {
                      return '250x250';
                    } else if (res == '2500w_2500h') {
                      return '250w_250h';
                    }
                  }
                )}`"
                alt=""
              />
            </div>
            <div class="tbic_right">
              <div class="tbicr_top">
                <div class="tbicrt_title">
                  <span class="tbicrtt_type">{{ taocan[1].titleTag }}</span
                  >{{ taocan[0].desc }}
                </div>
              </div>
              <div class="tbicr_bottom">
                <div class="tbicrb_yisou">已出售128</div>
                <div class="tbicrb_price">
                  <span class="tbicrbp_fh">￥</span>{{ taocan[1].price - 10 }}
                </div>
                <div class="tbicrb_btn">去购买</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <loading-jia v-else></loading-jia>
  </div>
</template>

<script>
import LoadingJia from "../components/LoadingJia.vue";
export default {
  props: {
    cinemaId: {},
  },
  data() {
    return {
      yingyuan: null,
      showslist: [],
      vipInfo: [],
      imgindex: 0,
      trantime: 0,
      moveX: 137.5,
      moveXstart: 137.5,
      movestart: 0,
      moveend: 0,
      imgliwidth: 0,
      dayselect: 0,
      taocan: [],
      nocinema: false,
      imgflag: true,
    };
  },
  created() {
    this.getcinema();
    this.gettaocan();
    this.getshowslist();
    // console.log(this.$route.query);
  },
  mounted() {},
  updated() {
    if (this.imgflag) {
      if (this.$route.query.movieid && this.showslist.length > 0) {
        this.imgflag = false;
        this.showslist.forEach((item, index) => {
          if (item.id == this.$route.query.movieid) {
            this.$nextTick(() => {
              this.touchend(index);
            });
          }
        });
      }
    }
  },
  methods: {
    async getshowslist() {
      this.$axios
        .get(`cinema/detail?cinemaId=${this.cinemaId || 32601 || 37893}`)
        .then((el) => {
          this.yingyuan = el;
        });
    },
    async gettaocan() {
      this.$axios.get("cinema/queryDealList.json").then((el) => {
        this.taocan.push(el.activity);
        this.taocan.push(el.dealList[0]);
      });
    },
    async getcinema() {
      this.$axios
        .get(
          `/cinema/shows?cinemaId=${
            this.cinemaId || 32601 || 37893 || 232
          }&ci=${this.$route.query.ci || 20 || 20 || 10}&channelId=4`
        )
        .then((el) => {
          if (el.movies == 0) {
            this.nocinema = true;
          } else {
            this.vipInfo = el.vipInfo;
            this.showslist = el.movies;
          }
        });
    },
    tuichu() {
      this.$router.back();
    },
    touchstart(e) {
      this.movestart = this.moveX - e.touches[0].clientX;
    },
    touchmove(e) {
      this.moveX = e.touches[0].clientX + this.movestart;
    },
    touchend(v) {
      if (v) {
        this.trantime = 1500;
      } else {
        this.trantime = 300;
      }
      setTimeout(() => {
        this.trantime = 0;
      }, this.trantime);
      if (this.imgliwidth == 0) {
        this.imgliwidth = this.$refs.imgli[1].offsetWidth + 15;
      }
      let index = Math.round((this.moveXstart - this.moveX) / this.imgliwidth);
      if (index > this.showslist.length - 1) {
        this.imgindex = this.showslist.length - 1;
      } else if (index <= 0) {
        this.imgindex = 0;
      } else {
        this.imgindex = index;
      }
      if (v) {
        this.imgindex = v;
      } else {
        this.moveX = this.moveXstart - this.imgindex * this.imgliwidth;
      }
    },
    touchcancel() {},
  },
  computed: {
    showitem() {
      return this.showslist[this.imgindex];
    },
    Datefliter() {
      return (date, templete = "YY年MM月dd日 hh时mm分ss秒") => {
        let d = new Date(date);
        if (/y+/gi.test(templete)) {
          templete = templete.replace(/y+/gi, function (res) {
            return String(d.getFullYear()).substr(4 - res.length);
          });
        }
        let obj = {
          "M+": d.getMonth() + 1,
          "d+": d.getDate(),
          "h+": d.getHours(),
          "m+": d.getMinutes(),
          "s+": d.getSeconds(),
        };
        for (var keyName in obj) {
          let reg = new RegExp(keyName, "g");
          let keyvalue = obj[keyName];
          if (reg.test(templete)) {
            templete = templete.replace(reg, function (res) {
              if (res.length === 1) {
                return keyvalue;
              }
              return keyvalue < 10 ? "0" + keyvalue : keyvalue;
            });
          }
        }
        return templete;
      };
    },
    Dayfliter() {
      return (day, arr) => {
        if (day == 0) {
          return "今天";
        } else if (day == 1) {
          let date1 = new Date(arr[0].showDate);
          let date2 = new Date(arr[1].showDate);
          if (date2.getDay() == 6 || date2.getDay() == 0) {
            return date2.getDay() == 6 ? "周六" : "周日";
          } else if (
            date2.getDay() == date1.getDay() + 1 ||
            (date2.getDay() == 0 && date1.getDay() == 6)
          ) {
            return "明天";
          }
        } else {
          let date3 = new Date(arr[day].showDate);
          let chday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
          return chday[date3.getDay()];
        }
      };
    },
    sanchang() {
      return (dur, time) => {
        let hour = parseInt(dur / 60);
        let minutes = dur % 60;
        let arr = time.split(":");
        let newhour = +arr[0] + hour;
        let newminutes = +arr[1] + minutes;
        if (newminutes >= 60) {
          newminutes = newminutes - 60;
          newhour++;
        }
        if (newhour == 24) {
          newhour = 0;
        }
        newhour = String(newhour).padStart(2, "0");
        newminutes = String(newminutes).padEnd(2, "0");
        return newhour + ":" + newminutes;
      };
    },
  },
  watch: {
    imgindex: {
      deep: true, //深度侦听，侦听引用数据类型的变化
      handler() {
        this.dayselect = 0;
        this.moveX = this.moveXstart - this.imgindex * this.imgliwidth;
      },
    },
  },
  components: {
    LoadingJia,
  },
};
</script>

<style lang="scss" scoped>
.yyxq {
  background-color: #f0f0f0;
  line-height: 1.15;
  color: #777;
  font-size: 14px;
  .cinema {
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
      text-align: center;
      color: #fff;
      background: #3c9fe6;
      .header_left,
      .header_right {
        width: 50px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        .icon-jiantou1 {
          font-size: 23px;
        }
      }
      .header_title {
        flex: 1;
        line-height: 50px;
        font-size: 18px;
        font-weight: 400;
      }
    }
    .location_block {
      background-color: #fff;
      position: relative;
      padding: 15px 100px 15px 15px;
      .lb_title {
        font-size: 17px;
        line-height: 24px;
        font-weight: 700;
        color: #333;
      }
      .lb_local {
        margin-top: 2px;
        font-size: 13px;
        line-height: 18.5px;
        color: #999;
      }
      .dwimg {
        position: absolute;
        right: 0px;
        top: 50%;
        width: 70px;
        height: 31px;
        transform: translateY(-50%);
        margin-top: 5px;
        text-align: center;
        .icon-position {
          color: #52a7ff;
        }
        &::after {
          position: absolute;
          top: -5px;
          left: 0;
          height: 100%;
          width: 1px;
          content: "";
          background: #d8d8d8;
          transform: scaleX(0.5);
          transform-origin: 0 0;
        }
      }
    }
    .cinxq {
      .imglunbo {
        position: relative;
        overflow: hidden;
        z-index: 1;
        padding: 20px 15px 20px 5px;
        .bg {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          background-size: contain;
          filter: blur(30px);
          background-position-y: 40%;
          overflow: hidden;
          z-index: -1;
        }
        .zezao {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          background-color: #40454d;
          opacity: 0.55;
        }
        .imgul {
          position: relative;
          width: 100%;
          height: 95px;
          z-index: 1;
          display: flex;
          transition-property: transform;
          box-sizing: initial;
          .imgli {
            width: 65px;
            height: 95px;
            margin-left: 15px;
            box-sizing: initial;
            flex-shrink: 0;
            position: relative;
            transition-property: transform;
            &:nth-child(1) {
              margin-left: 10px;
            }
            .img {
              background-color: #f5f5f5;
              opacity: 0;
              background-size: cover;
              background-repeat: no-repeat;
              width: 100%;
              height: 100%;
              animation: imageanimation 1s forwards;
            }
          }
          .active {
            transform: scale(1.15);
            border: 2px solid #fff;
            &::after {
              content: "";
              width: 0;
              height: 0;
              display: block;
              position: absolute;
              border: 5px solid transparent;
              border-top-color: #fff;
              left: 50%;
              transform: translateX(-50%);
              bottom: -11px;
            }
          }
        }
      }
      .jianjie {
        padding: 11px 15px;
        display: block;
        text-align: center;
        height: 44.5px;
        background-color: #fff;
        .cinname {
          height: 24px;
          line-height: 24px;
          font-size: 17px;
          color: #333;
          font-weight: 700;
          .pingfen {
            color: #ffb400;
            font-size: 16px;
            margin-left: 5px;
            line-height: 24px;
            font-weight: 700;
            .fen {
              font-size: 10px;
            }
          }
        }
        .cintime {
          margin-top: 2px;
          height: 18.5px;
          line-height: 18.5px;
          font-size: 13px;
          color: #999;
        }
      }
      .show_wrap {
        background-color: #fff;
        .date_nav {
          height: 45px;
          width: 100%;
          white-space: nowrap;
          position: relative;
          overflow-x: scroll;
          border-top: 1px solid #f3f3f3;
          border-bottom: 1px solid #f3f3f3;
          .dn_item {
            display: inline-block;
            line-height: 45px;
            height: 45px;
            margin-left: 30px;
            text-align: center;
            font-size: 14px;
            color: #666;
            &:nth-child(1) {
              margin-left: 15px;
            }
            &:last-child() {
              margin-right: 15px;
            }
          }
          .dni_select {
            color: #53a8e4;
            position: relative;
            &::after {
              content: "";
              position: absolute;
              width: 110%;
              height: 2px;
              bottom: 0;
              left: 50%;
              -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
              background-color: #53a8e4;
            }
          }
        }
        .vip_tips {
          margin-top: -1px;
          background-color: #fff5ea;
          padding: 0 15px;
          height: 42px;
          line-height: 42px;
          display: flex;
          color: #777;
          .vt_zekou {
            flex: 0 0 auto;
            display: inline-block;
            border-radius: 2px;
            font-size: 10px;
            line-height: 15px;
            height: 15px;
            width: 34px;
            text-align: center;
            color: #fff;
            margin-top: 13px;
            margin-right: 10px;
            background-color: #ff941a;
          }
          .vt_text {
            flex: 1 1 auto;
            font-size: 12px;
            color: #fa9600;
          }
          .vt_kaika {
            flex: 0 0 auto;
            line-height: 42px;
            color: #999;
            font-size: 12px;
            &::after {
              content: "\e624";
              display: inline-block;
              color: #ccc;
              //   width: 7px;
              //   height: 7px;
            }
          }
        }
        .sw_content {
          .swc_item {
            padding: 17px 12.5px;
            position: relative;
            &::after {
              position: absolute;
              left: 0;
              top: 0;
              height: 1px;
              width: 100%;
              content: "";
              background: #d8d8d8;
              transform: scaleY(0.5);
              transform-origin: 0 0;
            }
            .swci_box {
              display: flex;
              align-items: center;
              .swcib_time {
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-direction: column;
                .swcibt_top {
                  font-size: 20px;
                  color: #333;
                  line-height: 1;
                  white-space: nowrap;
                }
                .swcibt_bottom {
                  margin-top: 10px;
                  color: #999;
                  font-size: 11px;
                  line-height: 1;
                  white-space: nowrap;
                }
              }
              .swcib_type {
                flex: 1;
                margin-left: 17px;
                .swcibt_name {
                  margin-top: 2px;
                  line-height: 18px;
                  font-size: 13px;
                  color: #333;
                  white-space: normal;
                }
                .swcibt_ting {
                  margin-top: 7px;
                  font-size: 11px;
                  color: #999;
                  white-space: normal;
                }
              }
              .swcib_price {
                flex: 0 1 auto;
                width: 130px;
                margin-left: 5px;
                align-self: flex-start;
                .swcibp_num {
                  display: inline-block;
                  line-height: 1;
                  color: #f03d37;
                  margin-top: 1px;
                  font-size: 19px;
                  .qianfuhao {
                    font-size: 11px;
                  }
                }
                .sp_vipPrice {
                  display: inline-block;
                  line-height: 15px;
                  height: 15px;
                  transform: scale(0.8);
                  transform-origin: left;
                  margin: 0 -16px 0 4px;
                  border: 1px solid #ff9000;
                  border-radius: 2px;
                  font-size: 12px;
                  .spv_zelouka {
                    display: inline-block;
                    color: #fff;
                    background-color: #f90;
                  }
                  .spv_num {
                    display: inline-block;
                    padding: 0 2px;
                    color: #f90;
                    background-color: #fff;
                  }
                }
                .sp_extraDesc {
                  margin-top: 5px;
                  display: block;
                  font-size: 11px;
                  color: #999;
                }
              }
              .swcib_btn {
                width: 45px;
                margin-left: 2px;
                position: relative;
                height: 25px;
                line-height: 26px;
                font-size: 12px;
                border: 1px solid #f06762;
                border-radius: 50px;
                color: #f03d37;
                text-align: center;
              }
            }
          }
        }
        .nosw_content {
          background-color: #f0f0f0;
          .noswc_btn {
            margin: 20px auto 0;
            border-radius: 5px;
            width: 170px;
            height: 35px;
            line-height: 35px;
            font-size: 14px;
            color: #f03d37;
            border: 1px solid rgba(0, 0, 0, 0.15);
            background-color: #fff;
            text-align: center;
          }
        }
      }
    }
    .no_sell_cinema {
      background-color: #fff;
      .nosc_text {
        color: #999;
        line-height: 45px;
        height: 45px;
        font-size: 13px;
        padding-right: 15px;
        margin-left: 15px;
        position: relative;
        border-top: 1px solid #d8d8d8;
      }
    }
    .taocan {
      margin-top: 10px;
      padding: 0 15px;
      font-size: 15px;
      background-color: #fff;
      .taocan_title {
        padding: 12px 0;
        color: #666;
        font-size: 15px;
      }
      .taocan_box {
        color: #333;
        .tb_item {
          padding: 15px 0;
          overflow-y: hidden;
          display: flex;
          justify-content: space-between;
          align-items: center;
          position: relative;
          height: 92px;
          border-top: 1px solid #f3f3f3;
          .tbic_left {
            width: 92px;
            height: 92px;
            margin-right: 15px;
            background: #f0f0f0;
            position: relative;
            .tbicl_hot {
              position: absolute;
              left: 0;
              top: 0;
              display: inline-block;
              height: 18px;
              line-height: 18px;
              background-color: #fa5939;
              font-size: 12px;
              padding: 0 5px;
              color: #fff;
              border-bottom-right-radius: 2px;
            }
            .img {
              width: 100%;
              height: 100%;
              display: block;
            }
          }
          .tbic_right {
            display: flex;
            justify-content: space-between;
            flex: 1;
            flex-direction: column;
            height: 100%;
            position: relative;
            .tbicr_top {
              .tbicrt_title {
                font-size: 14px;
                line-height: 18px;
                color: #333;
                display: -webkit-box;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                .tbicrtt_type {
                  display: inline-block;
                  vertical-align: top;
                  margin-top: 1px;
                  margin-right: 7px;
                  padding: 0 4px;
                  font-size: 10px;
                  line-height: 15px;
                  height: 15px;
                  background: #f90;
                  border-radius: 2px;
                  color: #fff;
                }
              }
            }
            .tbicr_bottom {
              display: flex;
              justify-content: space-between;
              align-items: flex-end;
              position: relative;
              .tbicrb_yisou {
                display: inline-block;
                position: absolute;
                bottom: 34px;
                right: 0;
                line-height: 16px;
                height: 16px;
                font-size: 12px;
                color: #999;
              }
              .tbicrb_price {
                color: #f03d37;
                font-size: 17px;
                .tbicrbp_fh {
                  font-size: 14px;
                }
              }
              .tbicrb_btn {
                display: inline-block;
                padding: 0 8px;
                height: 27px;
                line-height: 27px;
                font-size: 12px;
                border-radius: 3px;
                color: #fff;
                background-color: #f03d37;
              }
            }
          }
        }
      }
    }
  }
}
.view_scroll_x_container::-webkit-scrollbar {
  display: none;
  width: 0;
}
.line_ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  //   -webkit-line-clamp: 3;
  //   display: -webkit-box;
  //   -webkit-box-orient: vertical;
}
@keyframes imageanimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>
<style lang='scss'>
.yyxq[data-yyxq="yyxq"] {
  .custom-image .van-empty__image {
    width: 90px;
    height: 90px;
  }
}
</style>